<template>
  <div class="fillcontain">
    <div class="contain">
      <div class="table_container">
        <div class="table_container_header">
          <span>平台账户管理</span>
          <div>
            <el-pagination
              background
              :current-page="pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalListNum"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>

        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          highlight-current-row
          header-cell-class-name="table-header-class"
          :max-height="maxheight"
        >
          <el-table-column label="序号" width="60" type="index" align="center">
          </el-table-column>
          <el-table-column
            property="name"
            label="平台名称"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <!-- <div
                @click="toCashRecordsList(scope.row.id)"
                style="cursor: pointer; color: blue"
              > -->
              {{ scope.row.name }}
              <!-- </div> -->
            </template>
          </el-table-column>
          <!-- <el-table-column property="name" label="收入总额" align="center">
          </el-table-column>
          <el-table-column property="name" label="待提现金额" align="center">
          </el-table-column>
          <el-table-column property="name" label="已提现金额" align="center">
          </el-table-column> -->
          <el-table-column
            property="bussiness_license_number"
            label="平台营业执照号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="bussiness_license"
            label="平台营业执照"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <img :src="scope.row.bussiness_license" style="width: 50px" />
            </template>
          </el-table-column>
          <el-table-column
            property="status"
            label="审核状态"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.status === 0 ? "通过" : "不通过" }}
            </template>
          </el-table-column>
          <el-table-column
            property="create_time"
            label="平台注册时间"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              {{
                scope.row.create_time
                  ? new Date(
                      Number(scope.row.create_time) * 1000
                    ).toLocaleString()
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            property="update_time"
            label="修改时间"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              {{
                scope.row.update_time
                  ? new Date(
                      Number(scope.row.update_time) * 1000
                    ).toLocaleString()
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="80"
            v-if="isHavePermission('saas_company_update_status')"
          >
            <template slot-scope="scope">
              <el-button
                v-permission="'saas_company_update_status'"
                size="mini"
                type="text"
                data-tracker="P1-1"
                @click="handleExamineFn(scope.row)"
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="账号审核"
      :visible.sync="isDisableDialogVisible"
      width="35%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleFormisable"
        status-icon
        :rules="rulesisable"
        ref="ruleFormisable"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="是否通过" prop="radio">
          <el-radio v-model="ruleFormisable.radio" label="1">未通过</el-radio>
          <el-radio v-model="ruleFormisable.radio" label="0">通过</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button data-tracker="P1-3" @click="isDisableDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" data-tracker="P1-2" @click="isDisableStatusFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, getUpdateStatus } from "@/api/user";
import { isHavePermission } from "@/utils/mUtils";

export default {
  data() {
    return {
      maxheight: "auto",
      isDisableDialogVisible: false,
      ruleFormisable: {
        radio: "1",
      },
      rulesisable: {},
      tableData: [],
      loading: true,
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      statusId: "",
    };
  },
  created() {},
  mounted() {
    this.getUserList(this.pageNum, this.pageSize);
  },
  methods: {
    isHavePermission(val) {
      return isHavePermission(val);
    },
    //审核状态操作
    handleExamineFn(val) {
      this.isDisableDialogVisible = true;
      this.statusId = val.id;
    },
    //确定按钮改变状态
    isDisableStatusFn() {
      const data = {
        id: this.statusId, // saas 公司id
        status: this.ruleFormisable.radio, // 状态值:  -1不通过，1通过
      };
      getUpdateStatus(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "更改审核状态成功！",
          });
          this.isDisableDialogVisible = false;
          this.getUserList(this.pageNum, this.pageSize);
        } else {
          this.$message({
            type: "success",
            message: res.message,
          });
        }
      });
    },
    getUserList(pageNumval, pageSizeval) {
      let para = {
        page: pageNumval,
        page_size: pageSizeval,
      };
      getUserList(para).then((res) => {
        this.loading = false;
        this.tableData = res.data.list;
        if (this.tableData.length > 6) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 225;
        } else {
          this.maxheight = "auto";
        }
        this.pageNum = res.data.pagination.current_page;
        this.totalListNum = res.data.pagination.total;
        this.pageSize = res.data.pagination.per_page_count;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.getUserList(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.getUserList(this.pageNum, this.pageSize);
    },
    // toCashRecordsList(id) {
    //   this.$router.push({
    //     path: "/finance/cashRecords",
    //     query: { id: id + "" },
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.fillcontain {
  padding: 10px 15px;
  background: #fff;
}
.contain {
  // background: #fff;
  // padding: 10px;
  // margin-bottom: 20px;
}
.pagination {
  padding: 10px 20px;
  text-align: right;
}
.table_container_header {
  display: flex;
  justify-content: space-between;
  margin: 0px 5px 10px 5px;
  span {
    margin-top: 5px;
    min-width: 100px;
  }
}
</style>



